import React, { Component } from 'react'
import { withRouter } from "react-router-dom"
// import { Tabs, WhiteSpace } from 'antd-mobile';
import Top from "./compon/top.js"
// import { unstable_Tabs as Tabs } from '@ant-design/mobile'
import axios from 'axios'
import {connect} from "react-redux"
import HouseList from '../../../../components/shoplist/list_main_List'

 class Collection extends Component {
     state={
        collectlist:[],
        shoplist:[]
    }
    componentDidMount() {
        if (this.props.location.state.props.flag) {
            this.props.history.replace("/login")
        }
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url:"/collect/collects ",
            method:"post",
            header:headerJSON,
            data:{
                phone:this.props.user.data.phone  
            }
        }).then(res=>{
            this.setState({
                collectlist:res.data.lists,
                shoplist:res.data.lists,
            })
            console.log(res)
        })
        this.setState({})
    }

    // state = {
    //      tabs2 : [
    //         { title: '楼盘', sub: '1' },
    //         { title: '情报', sub: '2' },
    //         { title: '问答', sub: '3' },
    //       ]
    // }
    hist = () => {
        // console.log( this.props.history)
        this.props.history.goBack()
    }
    render() {
        let {collectlist} = this.state
        return (
            <>
               <Top hist={this.hist} value={"我的收藏"} />
                <div>
                    {/* <WhiteSpace />
                    <div>
                        <WhiteSpace />
                        <Tabs tabs={this.state.tabs2}
                            initialPage={1}
                            
                            tabBarPosition="top"
                            renderTab={tab => <span>{tab.title}</span>}
                        >
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f9' }}>
                                Content of first tab
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',  backgroundColor: '#f5f5f9' }}>
                                Content of second tab
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#f5f5f9' }}>
                                Content of third tab
                            </div>
                        </Tabs>
                        <WhiteSpace />
                    </div> */}
                    <HouseList shoplist={collectlist}></HouseList>
                </div>

            </>
        )
    }
}

// ReactDOM.render(<TabExample />, mountNode);
export default connect(
    state=>({
        user:state.user,
        token:state.token
    })
)(withRouter(Collection))